import React from 'react'
import Timeline from '@/components/timeline'
import { Form, Input, Button, Space } from 'antd'
import { get2DArray } from '@/utils'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
import styles from './styles.module.less'

class BaseCard extends React.Component {
  state = {
    flag: false,
    values: []
  }

  // onFinish = (values) => {
  // }

  render() {
    const { flag } = this.state
    console.log(flag, 'flag')
    return (
      <div>
        <Form name="dynamic_form_nest_item" onFinish={this.onFinish} autoComplete="off">
          <Form.List name="users">
            {(fields, { add, remove }) => (
              <>
                {fields.map((field) => (
                  <Space
                    key={field.key}
                    style={{ display: 'flex', marginBottom: 8 }}
                    align="baseline">
                    <Form.Item
                      {...field}
                      name={[field.name, 'first']}
                      fieldKey={[field.fieldKey, 'first']}
                      rules={[
                        {
                          pattern: /^1(3[0-9]|4[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8}$/,
                          message: '请输入正确的手机号'
                        }
                      ]}>
                      <Input placeholder="First Name" />
                    </Form.Item>
                    <MinusCircleOutlined onClick={() => remove(field.name)} />
                  </Space>
                ))}
                {fields.length > 2 ? (
                  <Form.Item>
                    <Button
                      disabled
                      type="dashed"
                      onClick={() => {
                        add()
                        this.onFinish()
                      }}
                      block
                      icon={<PlusOutlined />}>
                      Add field
                    </Button>
                  </Form.Item>
                ) : (
                  <Form.Item>
                    <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                      Add field
                    </Button>
                  </Form.Item>
                )}
              </>
            )}
          </Form.List>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}
export default BaseCard
